<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/movies.css">
</head>
<body>
    <svg width="0" height="0">
        <symbol id='1' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
            <path d="M6.133 21C4.955 21 4 20.02 4 18.81v-8.802c0-.665.295-1.295.8-1.71l5.867-4.818a2.09 2.09 0 0 1 2.666 0l5.866 4.818c.506.415.801 1.045.801 1.71v8.802c0 1.21-.955 2.19-2.133 2.19z"/>
            <path d="M9.5 21v-5.5a2 2 0 0 1 2-2h1a2 2 0 0 1 2 2V21"/></g>
        </symbol>
        <symbol id='search' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11.5a7.5 7.5 0 1 1-15 0a7.5 7.5 0 0 1 15 0m-2.107 5.42l3.08 3.08"/>
        </symbol>
        <symbol id='2' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="currentColor"
                d="M3 3h18v18H3zm2 2v2h2V5zm4 0v6h6V5zm8 0v2h2V5zm2 4h-2v2h2zm0 4h-2v2h2zm0 4h-2v2h2zm-4 2v-6H9v6zm-8 0v-2H5v2zm-2-4h2v-2H5zm0-4h2V9H5z" />
        </symbol>
        <symbol  id='3' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                d="m12 7l6.632-4m-7.106 4L5.368 3M3 9.154C3 7.964 3.895 7 5 7h14c1.105 0 2 .964 2 2.154v9.692c0 1.19-.895 2.154-2 2.154H5c-1.105 0-2-.964-2-2.154z" />
        </symbol>
        <symbol  id='4' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0-8 0M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
        </symbol>
    </svg>
    <!-- 头部开始 -->
     <div class="w">
        <div class="top">
            <div class="tu">
            <a href="#"><img src="images/catflix.svg" alt=""></a>
            </div>
            <!-- nav部分 -->
            <div class="nav">
                <ul>
                    <li>
                        <a href="#">
                            <svg width="25px" height="25px">
                                <use xlink:href="#1"></use>
                            </svg>
                            <span>家</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg width="25px" height="25px">
                                <use xlink:href="#2"></use>
                            </svg>
                            <span>电影</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <svg width="25px" height="25px">
                                <use xlink:href="#3"></use>
                            </svg>
                            <span>系列</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="search">
                <div class="sea">
                    <a href="">
                        <svg width="25px" height="25px">
                            <use xlink:href="#search"></use>
                        </svg>
                    <span>搜索</span>
                    </a>
                </div>
                <div class="user"> <a href="">
                    <svg width="25px" height="25px">
                        <use xlink:href="#4"></use>
                    </svg>
                </a></div>
            </div>
        </div>
        <!-- 头部结束 -->
        <h2 class="top_movies">
            Movies
        </h2>
        <!-- banner开始 -->
        <div class="banner-nav">

            <div class="ban-nav1">
                <a href="#">Featured</a>
            </div>
            <div class="ban-nav2">
                <a href="#">Just added</a>
            </div>
            <div class="ban-nav3">
                <a href="#">A - Z</a>
            </div>
            <div class="ban-nav4">
                <a href="#">Popular</a>
            </div>
            <div class="ban-nav5">
                <a href="#">Action</a>
            </div>
            <div class="ban-nav6">
                <a href="#">Action&Adventure</a>
            </div>
            <div class="ban-nav7">
                <a href="#">Adventure</a>
            </div>
            <div class="ban-nav8">
                <a href="#">Animation</a>
            </div>
            <div class="ban-nav9">
                <a href="#">Comedy</a>
            </div>
            <div class="ban-nav10">
                <a href="#">Crime</a>
            </div>
            <div class="ban-nav11">
                <a href="#">Documenta</a>
            </div>

        </div>
        <!-- banner结束 图片开始 -->
        <div class="end-tu">
            <div class="tu1 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/4t80WORFWqDYf4BRwV2jrXNHJdN.jpg">
                </a>
            </div>
            <div class="tu2 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/2cxhvwyEwRlysAmRH4iodkvo0z5.jpg" alt="">
                </a>
            </div>
            <div class="tu3 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/eijfr4QiMu1ZK2XfBNd9KjoRmau.jpg" alt="">
                </a>
            </div>
            <div class="tu4 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/cdqLnri3NEGcmfnqwk2TSIYtddg.jpg" alt="">
                </a>
            </div>
            <div class="tu5 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/3h6SyezeKyT7VpEHyLqckbBZuoM.jpg" alt="">
                </a>
            </div>
            <div class="tu6 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/2cxhvwyEwRlysAmRH4iodkvo0z5.jpg" alt="">
                </a>
            </div>
            <div class="tu7 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/79euHUJJtfgeGU63ef38KtNjXEn.jpg" alt="">
                </a>
            </div>
            <div class="tu8 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/tPRH0Rm00esNefnI1ZxQqTTIpzJ.jpg" alt="">
                </a>
            </div>
            <div class="tu9 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/dIZ3SzuT3YuAWX1fjdxDevbwQBX.jpg" alt="">
                </a>
            </div>
            <div class="tu10 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/dMXWEXVWiJ2FHO32ZLCCuy2a1gi.jpg" alt="">
                </a>
            </div>
            <div class="tu11 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/sK892n6rLFHujmgKBrV8R3occif.jpg" alt="">
                </a>
            </div>
            <div class="tu12 lg-5 md-5 xl-5 sm-7">
                <a href="#">
                    <img src="https://image.tmdb.org/t/p/w342/29uKScAbQuKsMEdAn12a6BmvFn7.jpg" alt="">
                </a>
            </div>
        </div>
        
        <!-- more开始 -->
         <div class="more">
            <a href="#">Load more</a>
         </div>

         <div class="foot-nav">
            <img src="images/catflix.svg" alt="">
            <div class="home">
                <ul class="">
                    <li><a href="">Home</a></li>
                    <li><a href="">Movies</a></li>
                    <li><a href="">Series</a></li>
                    <li><a href="">Search</a></li>
                </ul>
            </div>
            <div class="home1">
                <ul class="">
                    <li><a href="">Distv+2023</a></li>
                    <li><a href="">Home</a></li>
                    <li><a href="">Movies</a></li>
                    <li><a href="">Series</a></li>
                    <li><a href="">Search</a></li>
                </ul>
            </div>
         </div>

         <!-- foot开始 -->
         <div class="foot">
            <div class="foot-home">
                <a href="#">
                    <svg width="25px" height="25px">
                        <use xlink:href="#1"></use>
                    </svg>
                    Home
                </a>
            </div>
            <div class="foot-mov">
                <a href="#">
                    <svg width="25px" height="25px">
                        <use xlink:href="#2"></use>
                    </svg>
                    Movies
                </a>
            </div>
            <div class="foot-ser">
                <a href="#">
                    <svg width="25px" height="25px">
                        <use xlink:href="#3"></use>
                    </svg>
                    Series
                </a>
            </div>

         </div>

    </div>  

     
</body>
</html>
